<!DOCTYPE html>
<html class="no-js" lang="zh_CN">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">

    <title>${system_admin_title}</title>
    #required_css
</head>

<body>
<div class="app $!layout">
    <!-- 头部菜单 -->
    <section class="layout">
        <!-- 菜单 -->
        <section class="container">
            <!-- 机构  -->
            <aside class="sidebar-250 canvas-right bg-default ">
                <header class="header navbar clearfix pl0 pr0">
                    <p class="navbar-text"><i class="fa fa-sitemap mr5"></i> 组织结构</p>
                </header>
                <div class="content-wrap no-p">
                    <div class="wrapper">
                        <div id="jsTreeUnit"></div>
                    </div>
                </div>
            </aside>
            <!-- 内容主体 -->
            <section class="main-content">
                <!-- 主体操作栏 -->
                <header class="header navbar">
                    <!-- 左按钮区 -->
                    <div class="btn-group tool-button">
                        <a class="btn btn-primary navbar-btn" href="$!basePath/system/user/add" data-pjax ns-prem="btnAdd"><i
                                class="fa fa-user-plus"></i> 新增用户</a>
                        <button class="btn btn-danger navbar-btn" onclick="delCheck()" ns-prem="btnRemove"><i class="fa fa-user-times"></i>
                            删除选中
                        </button>
                    </div>
                    <div class="pull-right offscreen-right">
                        <button class="btn btn-primary navbar-btn"
                                onclick="ns.view.showSidebarStatic('.sidebar-panel')"><i class="fa fa-sliders"></i> 筛选
                        </button>
                    </div>
                </header>
                <div class="content-wrap">
                    <div class="wrapper">
                        <form action="$!basePath/system/user" method="post">
                            <div class="row">
                                <div class="col-lg-12 col-md-12 table-responsive">
                                    <table id="userTable" class="table table-hover no-m">
                                        <thead>
                                        <tr>
                                            <th>
                                                <input type="checkbox" class="icheck" data-check-all="data-check-item">
                                            </th>
                                            <th class="col-md-2 pd-l-lg">
                                                <span class="pd-l-sm"></span>用户名
                                            </th>
                                            <th class="col-md-2">姓名</th>
                                            <th class="col-md-2">联系方式</th>
                                            <th class="col-md-2">邮箱</th>
                                            <th class="col-md-1">#springMessage('system.common.status')</th>
                                            <th class="col-md-1">是否在线</th>
                                            <th class="col-md-2">#springMessage('system.common.op')</th>
                                        </tr>
                                        </thead>
                                        <tbody></tbody>
                                    </table>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-lg-12 col-md-12">
                                    #pager_ajax
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
                <a class="exit-offscreen"></a>
            </section>
            <div class="sidebar-panel from-right">
                <div class="sidebar-panel-container shadow">
                    <header class="sidebar-panel-header">
                        <h4>筛选</h4>
                        <a href="javascript:$('.sidebar-panel').click();" class="sidebar-panel-close text-center"><i
                                class="ti-close"></i> </a>
                    </header>
                    <div class="sidebar-panel-content">
                        <form role="form" onsubmit="return doSearch(this);">
                            <div class="form-group">
                                <label for="userName">用户名</label>
                                <input name="userName" type="text" class="form-control" placeholder="用户名/登录名" autofocus>
                            </div>
                            <div class="form-group">
                                <label for="realName">姓名</label>
                                <input name="realName" type="text" class="form-control" placeholder="姓名">
                            </div>
                            <button type="submit" class="btn btn-default">查询</button>
                        </form>
                    </div>
                </div>
            </div>
            <!-- 删除选中用户 -->
            <div id="dialogDeleteCheck" class="modal fade bs-modal-lg" tabindex="-2" role="dialog" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                            <h4 class="modal-title">删除用户</h4>
                        </div>
                        <div class="modal-body">
                            <div class="row">
                                <div class="col-xs-12 mb10">
                                    确定删除以下用户吗？
                                </div>
                                <div class="col-xs-12">
                                    <ul id="checkedUser" class="list-group"></ul>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button id="ok" type="button" class="btn btn-primary" data-loading-text="正在删除...">确 定
                            </button>
                            <button type="button" class="btn btn-default" data-dismiss="modal">取 消</button>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </section>
</div>
#required_js
<script type="text/javascript">
    //导入js
    ns.requireJS(["/framework/js/form/checkbox.js", "/framework/js/view/toast.js", "/framework/js/view/tree.js", "/framework/js/view/treetable.js", "/framework/js/form/editable.js"]);
    var cid;
    function initTreeView() {
        $("#jsTreeUnit").jstree({
            plugins: ["wholerow"],
            core: {
                data: {
                    url: function (node) {
                        return node.id === "#" ? "$!basePath/system/unit/tree" : "$!basePath/system/unit/tree/" + node.id
                    }
                },
                multiple: false
            }
        }).on("select_node.jstree", function (node, selected) {
            cid = selected.selected;
            loadUser();
        }).on("loaded.jstree", function (node, jstree) {
            var id = ns.data.sessionStorage.get("sys_user_tree_id");
            if (!id)
                id = $(node.target).find("li:first").attr("id");
            if (id)
                jstree.instance.select_node(id);
        });
    }
    function loadUser() {
        ns.asyncRequest("$!basePath/system/user/unituser/" + cid, {}, "#userTable tbody", function () {
            ns.data.sessionStorage.set("sys_user_tree_id", cid);
            initXeditable();
            ns.form.initCheckbox();
        });
    }
    function doSearch(form) {
        var attrs = ns.formAttrs($(form));
        ns.asyncRequest("$!basePath/system/user/unituser/" + cid, attrs, "#userTable tbody");
        return false;
    }
    function del(id) {
        ns.confirm("用户删除后无法恢复，确定删除吗？", function () {
            $.post("$!basePath/system/user/delete/" + id, {}, function (data) {
                if (data.success == true) {
                    $("#" + id).remove();
                } else {
                    Toast.error(data.error);
                }
            });
        });
    }
    function delCheck() {
        var ids = ns.form.check("#userTable").getChecks();
        if (ids.length > 0) {
            var content = "<div class=\"col-xs-12 mb10\">确定删除以下用户吗？</div><div class=\"col-xs-12\"><ul class='no-m'>";
            $.each(ids, function (i, id) {
                var tr = $("#" + id);
                content += "<li>" + tr.attr("name") + "</li>";
            });
            content += "</ul></div>";

            ns.tip.confirm(content, function () {
                $.post("$!basePath/system/user/delete", {ids: ids.toString()}, function (data) {
                    if (data.success == true) {
                        loadUser();
                    } else {
                        ns.tip.toast.error(data.error);
                    }
                });
            });
        } else {
            ns.tip.toast.warning("请先选择要删除的用户！");
        }
    }
    function enableUser(id) {
        $.post("$!basePath/system/user/enable/" + id, {}, function (data) {
            if (data.success == true) {
                $("#td_status_" + id).find("i").attr("class", "fa fa-circle text-success ml5");
            } else {
                Toast.error(data.error);
            }
        });
    }
    function disableUser(id) {
        $.post("$!basePath/system/user/disable/" + id, {}, function (data) {
            if (data.success == true) {
                $("#td_status_" + id).find("i").attr("class", "fa fa-circle text-danger ml5");
            } else {
                Toast.error(data.error);
            }
        });
    }
    //密码重置
    function resetPwd(id) {
        ns.tip.confirm("确定重置密码吗？", function () {
            $.post("$!basePath/system/user/resetPwd/" + id, {}, function (data) {
                if (data.success == true) {
                    Toast.success("密码重置成功!");
                } else {
                    Toast.error(data.error);
                }
            });
        });
    }
    function initCheckBox() {
        var chkAll = $("#userTable th input[type='checkbox']");
        chkAll.on("ifChecked", function (event) {
            $("#userTable td input[type='checkbox']").iCheck("check");
        });
        chkAll.on("ifUnchecked", function (event) {
            $("#userTable td input[type='checkbox']").iCheck("uncheck");
        });
    }
    function initXeditable() {
        //x-editable
        $(".xeditable-realname").editable({//姓名快捷编辑
            url: "$!basePath/system/user/edit/realname",
            validate: function (value) {
                if ($.trim(value) == '') {
                    return "姓名不能为空！";
                }
            }
        });
        $(".xeditable-mobile").editable({//手机号快捷编辑
            url: "$!basePath/system/user/edit/mobile"
        });
        $(".xeditable-email").editable({//邮箱快捷编辑
            url: "$!basePath/system/user/edit/email"
        });
    }
    ns.ready(function () {
        initTreeView();
        initCheckBox();
        //删除页面缓存
        $("#dialogUserDetail").on("hidden.bs.modal", function () {
            $(this).removeData("bs.modal");
        });
        $("#dialogUserRightDetail").on("hidden.bs.modal", function () {
            $(this).removeData("bs.modal");
        });
    });

</script>
</body>
</html>
